<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
    <style type="text/css">
      .bg {
        background: #f00;
      }

      .font {
        font-size: 40px;
      }
    </style>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="example">
      <div v-if="onOff">{{ message }}</div>

      <div v-else>{{ reversedMessage }}</div>

      <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>

      <!-- 
			v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素,
			可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终
			的渲染结果将不包含 <template> 元素。 
		-->

      <template v-if="loginType === 'username'">
        <label>Username</label>

        <!--  
				Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可
		  -->

        <input placeholder="Enter your username" key="username-input" />
      </template>

      <template v-else>
        <label>Email</label>

        <input placeholder="Enter your email address" key="email-input" />
      </template>
    </div>

    <script>
      //数据
      let data = {
        message: 'miaov',

        onOff: true,

        type: 'A',

        loginType: 'username'
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data,

        computed: {
          reversedMessage: function() {
            return this.message
              .split('')
              .reverse()
              .join('')
          }
        }
      })
    </script>
  </body>
</html>
